<template>
    <div v-if="arrList.length > 0">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>图书名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in arrList" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.bookName }}</td>
                <td>{{ item.data }}</td>
                <td>￥{{ item.price }}.00</td>
                <td><input type="button" value="-" @click="item.count--" :disabled="item.count <= 1">{{ item.count }}<input type="button" value="+" @click="item.count++"></td>
                <td><input type="button" value="移除" @click="btnDel(item.id)"></td>
            </tr>
        </tbody>
    </table>
    <h2>总价格：￥{{ sumComputed }}</h2>
    </div>
    <div v-else>
        <h2>购物车为空</h2>
    </div>
</template>
<script setup>
import { computed, ref } from 'vue';

let arr = [
    {
        id:1,
        bookName:'《JavaScript程序设计》',
        data:'2022-9',
        price:85.00,
        count:1,
    },
    {
        id:2,
        bookName:'《C语言基础》',
        data:'2021-2',
        price:59.00,
        count:1,
    },
    {
        id:3,
        bookName:'《Java高级语言编程》',
        data:'2022-10',
        price:39.00,
        count:1,
    },
    {
        id:4,
        bookName:'《数据库原理》',
        data:'2023-3',
        price:138.00,
        count:1,
    },
    {
        id:5,
        bookName:'《计算机网络》',
        data:'2022-8',
        price:88.00,
        count:1,
    },
]
let arrList = ref(arr)

let sumComputed = computed(() => {
    let sum = 0
    arrList.value.map(item => {
        sum += item.price*item.count
    })
    return sum
})

function btnDel(id){
// 找到要移除的图书的下标
let bookId = arrList.value.findIndex(item => item.id === id)
arrList.value.splice(bookId,1)
}
</script>